 /*
 * @description: 客服系统入口
 * @Author: along
 * @Date: 2020-09-23
 * @Last Modified by: along
 * @Last Modified time: 2020-10-15
 */
<template>
    <div class="__body">
        <div class="__nav-bar">
            <div class="__nav-info">
                <img
                    :src="userInfo.head_img"
                    class="__nav-logo"
                />
                <p class="__nav-name">{{ userInfo.nickname }}</p>
                <div class="__nav-tel">
                    <p class="__nav_tel_number">{{ userInfo.phone }}</p>
                    <p class="__nav_tel_status" :style="{background: '#4CD964'}"></p>
                </div>
            </div>
            <el-menu
                :default-active="navActive"
                class="el-menu-vertical-demo"
                router
                background-color="#23242A"
                text-color="rgba(255, 255, 255, 0.5)"
                active-text-color="#20A0FF"
                :unique-opened="false"
            >
                <el-menu-item
                    v-for="(option,i) in menuList"
                    :key="i"
                    :index="option.path"
                    class="__coustom-nav"
                >
                    <template slot="title">
                        <i class="zsdxfont" :class="option.icon" />
                        <span>{{ option.name }}</span>
                    </template>
                </el-menu-item>
            </el-menu>

            <div class="__layout" @click="dialogVisible = true">
                退出登录
            </div>
        </div>
        <div class="__container">
            <div class="__header">
                <img src="@/assets/image/system-logo.png" v-if="userInfo.type == 1" class="__header_logo">
                <div class="__name" v-else>您好！{{ userInfo.shop.shop_title }}</div>
                <div class="__right" @click="handleCheckPdf()">
                    <div class="__pdf">
                        <img src="@/assets/image/custom_icon_pdf.png" class="__pdf_icon">
                        使用手册
                    </div>
                    <div class="__menu">
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                <img :src="userInfo.head_img" class="__logo">
                                <p class="__username">{{ userInfo.nickname }}</p>
                                <i class="zsdxfont zsdxjiantouyou"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <a
                                        class="drop-menu"
                                        @click="dialogVisible = true"
                                    >
                                        <img
                                            class="drop-menu-logo"
                                            src="//cdn.zsdx.cn/wei/images/hire/manage/menu-logo3.png"
                                        >
                                        <div class="drop-menu-text">退出登录</div>
                                        <i class="el-icon-arrow-right" />
                                    </a>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>
            <router-view />
        </div>

        <!-- 退出登录 -->
        <layout
            :dialogVisible="dialogVisible"
            @close="closeDialog"
        />
    </div>
</template>

<script>
import layout from '@/components/dialog/layout.vue';
import { mapState } from 'vuex';
export default {
    components: {
        layout
    },
    data() {
        return {
            dialogVisible: false,//退出登录弹窗
            userInfo: {
                type: '',
                shop: {
                    shop_no: '',
                    shop_title: ''
                },
                nickname: '',
                head_img: '',
                phone: ''
            },
            navActive: '',
            menuList: []
        };
    },
    watch: {
        $route(val) {
            this.navActive = val.path;
        }
    },
    computed: {
        ...mapState({
            login: state => state.global.login,
            authList: state => state.global.authList
        })
    },
    mounted () {
        this.navActive = this.$router.history.current.path;
        this.getUserInfo();
        this.getAuthList();
        this.checkLogin();

        console.log('@@@开发环境@@@', process.env.NODE_ENV == 'development' ? '开发环境' : '生产环境');
    },
    methods: {
        /**
         * @description 检测登录状态
         */
        checkLogin () {
            try {
                const login = sessionStorage.getItem('CUSTOM_LOGIN');

                if(!login) {
                    this.$router.push({
                        name: 'Login'
                    });
                } else {
                    this.$store.commit('global/SET_LOGIN', true);
                    this.init();
                    return false;
                }
            } catch (error) {
                this.$router.push({
                    name: 'Login'
                });
            }
        },

        /**
         * @description 初始化客服系统，连接socket
         */
        init () {
            // this.$store.commit('global/INIT_CONNECT_SOCKET', {
            //     isHeartCheck: true,
            //     socketUrl: 'ws://127.0.0.1:6080',//测试地址
            //     reConnectTime: 2000
            // } );
            this.$post('/Socket/getSocket', {}, resp => {
                if(resp.code == 1) {
                    this.$store.commit('global/INIT_CONNECT_SOCKET', {
                        isHeartCheck: true,
                        socketUrl: resp.data.socket_url,
                        reConnectTime: 2000
                    } );
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 获取用户信息
         */
        getUserInfo () {
            this.$post('/UserCenter/getUserInfo',{},resp => {
                if(resp.code == 1) {
                    this.userInfo = {
                        ...resp.data
                    };
                    this.$store.commit('global/SET_USER_INFO', resp.data);
                }
            });
        },

        /**
         * @description 获取权限列表
         */
        getAuthList () {
            this.$post('/UserCenter/getValidAuthList',{},resp => {
                if(resp.code == 1) {
                    let auth = resp.data.list;
                    this.$store.commit('global/SET_AUTH_LIST', resp.data.list);

                    if(auth.includes('session')) {
                        this.menuList = [{
                            name: '当前会话',
                            path: '/',
                            icon: 'zsdxhuihuazhong'
                        }
                        ,{
                            name: '历史会话',
                            path: '/custom-message',
                            icon: 'zsdxlishihuihua'
                        }
                        ,{
                            name: '数据统计',
                            path: '/custom-data',
                            icon: 'zsdxshujutongji'
                        }];
                    } else {
                        this.menuList = [{
                            name: '历史会话',
                            path: '/custom-message',
                            icon: 'zsdxlishihuihua'
                        }
                        ,{
                            name: '数据统计',
                            path: '/custom-data',
                            icon: 'zsdxshujutongji'
                        }];

                        this.$router.push({
                            name: 'customMessage'
                        });
                    }
                }
            });
        },

        /**
         * @description 重置弹窗状态
         */
        closeDialog () {
            this.dialogVisible = false;
        },

        /**
         * @description 查看手册
         */
        handleCheckPdf () {
            window.open('//cdn.zsdx.cn/wei/file/operation_manual.pdf');
        }
    },
};
</script>

<style lang="less" scoped>
.__body {
    display: flex;
    align-items: center;
    height: 100vh;
    width: 100%;
}
.__nav-info {
    width: 152px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding-top: 32px;
    margin-bottom: 24px;
    .__nav-logo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-bottom: 8px;
    }
    .__nav-name {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 140px;
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
    }
    .__nav-tel {
        height: 16px;
        display: flex;
        align-items: center;
        .__nav_tel_number {
            color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
            margin-right: 4px;
        }
        .__nav_tel_status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
    }
}
.__nav-bar {
    width: 152px;
    height: 100%;
    overflow: auto;
    background: rgba(35, 36, 42, 1);
    position: relative;
    .__layout {
        width: 152px;
        height: 56px;
        position: absolute;
        bottom: 8px;
        left: 0;
        text-align: center;
        line-height: 56px;
        color: #20A0FF;
        font-weight: 500;
        box-sizing: border-box;
        cursor: pointer;
        border-top: 1px rgba(95, 149, 189, 0.1) solid;
    }
}
.__container {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F0F2F7;
}
.__header {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    box-sizing: border-box;
    padding: 0 32px 0 24px;
    .__header_logo {
        width: 152px;
        height: 22px;
    }
    .__name {
        font-size: 14px;
        color: #000000;
    }
    .__right {
        display: flex;
        align-items: center;
        cursor: pointer;
        .__pdf {
            width: 98px;
            height: 24px;
            background: rgba(255, 248, 240, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgba(252, 146, 80, 1);
            font-size: 12px;
            margin-right: 25px;
            border-radius: 12px;
            img {
                width: 16px;
                height: 16px;
                margin-right: 4px;
            }
        }
    }
    .__menu {
        height: 30px;
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        .el-dropdown-link {
            display: flex;
            align-items: center;
        }
        .__logo {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            border-radius: 50%;
        }
        .__username {
            font-size: 14px;
            color: #000000;
            margin-right: 8px;
        }
        .zsdxtongyongguanbi {
            font-size: 15px;
            color: #000000;
        }
    }
}
.drop-menu{
    width: 160px;
    height: 40px;
    display: flex;
    align-items: center;
    &-logo{
        width: 14px;
        height: 14px;
        margin-right: 5px;
        user-select: none;
    }
    &-text{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        .phone-number{
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            line-height: 20px;
        }
    }
    .el-icon-arrow-right{
        font-size: 12px;
        line-height: 20px;
        margin-left: 5px;
        color: #999;
    }
}
</style>

<style lang="less">
.__body {
    .__coustom-nav {
        width: 152px;
    }
    .el-menu-item {
        display: flex;
        padding: 0px !important;
        .zsdxfont {
            margin-right: 12px;
            margin-left: 24px;
        }
    }
}
</style>